<template>
    <div class="list"><!--去拼团列表-->
        <van-cell v-if="!show" is-link>买过的人这样说({{rowCount}})</van-cell>
        <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="show && handleGetList"
            offset="400"
        >
            <comment-item v-for="(item, index) in list" :key="item.comment_id" :date="item" :ind="index"/>
            <van-row class="more" v-if="!finished">
                <van-col span="24"  @click="handleGetList()" center >查看全部{{rowCount}}条评价 <br><van-icon name="arrow-down"/></van-col>
            </van-row>
<!--            <li v-for="item in list" :key="item.item_id"  @click="detialRoute(item)" ><e-item :date="item"/></li>-->
        </van-list>
    </div>
</template>

<script>
    import commentItem from './comment-item'
    export default {
        name: "list-item",
        props: {
            show: {
                type:Boolean,
                required:false,
                default: false
            },
            verify_code:{
                type:String,
                required:true,
            },
            product_id:{
                type:String,
                required:true,
            }
        },
        data() {
            return {
                list: [], // 列表数组
                loading: false, // 是否处于加载中
                finished: false, // 是否停止load方法
                rowCount: 0,
                page: 1, // 请求的页面
                pageSize: 3
            }
        },
        components: {
            commentItem
        },
        methods: {
            detialRoute (item) {
                this.$router.push({path: '/yiqituan/detial', query:{item_id:item.item_id, type: item.type, tid: ''}})
            }, // 跳转详情页
            getList() { // 根据参数获取数据列表/*评论*/
                this.loading = false; // 加载中
                /*评论*/
                this.$jsonp(`http://koubei.jumei.com/api/v1/getThreadAndReportAndComment.html?page=${this.page}&page_size=${this.pageSize}&order=image&client_v=5.0&is_pop=2&product_id=${this.product_id}&verify_code=${this.verify_code}&uid=89825528&tag=all&_=1583395091297&callback=Zepto1583395085580`)
                    .then(res => {
                        this.rowCount = res.data.row_count // 总评论
                        this.loading = true;// 本次加载完成
                        console.log(res.data)
                        if (this.page === 1) {
                            this.list = [...res.data.filterList]; // 把数组赋值
                        } else {
                            this.list.push(...res.data.filterList); // 把数组添加进去
                        }
                        this.page++
                        if ( res.data.row_count <= this.list.length) {
                            this.finished = true // 停止触发
                        }
                    })
                    .catch(err => {
                        console.log(err)
                    })
            }, // 获取评论数据
            handleGetList () {
                this.pageSize = 20
                this.getList()
            } // 点击获取数据
        },
        mounted() {
            // 组件第一次挂载就运行一次
           this.getList()
            this.page--
        }
    }
</script>

<style scoped lang="scss">
.list{
    background-color: #fff;
}
.course-title{
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    .course-rule{
        font-size: 3.5vw;
        color: $color-v3;
    }
}
.more{
    border-bottom: 1px solid #eee;
    background-color: #ffffff;
    text-align: center;
    padding: 10px 0;
}
</style>
